<template>
    <div class="PersonnelTurnover">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            校园人员流动情况
        </p>
    </div>
    <div class="visitor">
        <div class="yesterday">
            <div class="yesterday_icon">
                <img src="../../assets/IconYesterday.png" alt="">
            </div>
            <div class="yesterday_number">
                <p style="font-size: 16px; font-weight: 400;">
                    6
                </p>
                <p style="font-size: 9px; color: rgba(194, 214, 255, 1);">
                    昨日外来访客
                </p>
            </div>
        </div>
        <div class="today">
            <div class="today_icon">
                <img src="../../assets/IconToday.png" alt="">
            </div>
            <div class="today_number">
                <p style="font-size: 16px; font-weight: 400;">
                    13
                </p>
                <p style="font-size: 9px; color: rgba(194, 214, 255, 1);">
                    今日外来访客
                </p>
            </div>
        </div>
    </div>
    <div ref="chart" class="PersonnelTurnover-Bottom">

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;
const PersonnelTurnover = () => {
    myChart = echarts.init(chart.value);

    window.addEventListener('resize', function () {
        myChart.resize();
    });

    // 配置柱状图的选项
    const option = {
        // title: {
        //     text: '外来访客统计',
        //     textStyle: { color: '#333333' }, // 设置标题颜色为深色
        // },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['昨日外来访客', '今日外来访客'],
            textStyle: {
                color: '#fff', // 图例文字颜色为深色
                fontSize: 10
            },
            icon: 'circle', // 将图例的图标设置为圆形
            right: 10, // 将图例靠右对齐
            itemWidth: 10, // 设置圆点的宽度（大小）
            itemHeight: 10, // 设置圆点的高度（大小）
        },
        grid: {
            left: '10%', // 设置图表网格左边距
            right: '10%', // 设置图表网格右边距
            top: '15%', // 设置图表网格顶部边距
            bottom: '15%', // 设置图表网格底部边距
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月'], // 横向显示月份
            axisLine: {
                lineStyle: { color: '#2B3E7B' }, // X轴颜色改成深色
            },
            axisLabel: {
                color: '#ffffff', // X轴标签颜色改成深色
            },
            axisTick: {
                show: false, // 隐藏X轴刻度线
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 80,
            interval: 20,
            axisLine: {
                lineStyle: { color: '#587396' }, // Y轴颜色改成深色
            },
            axisLabel: {
                color: '#587396', // Y轴标签颜色改成深色
            },
            splitLine: {
                show: true,// 显示Y轴网格线
                lineStyle: {
                    color: '#2B3E7B', // 网格线颜色
                    width: 1, // 网格线宽度
                    type: 'solid', // 网格线类型，'solid'为实线
                }
            }
        },
        series: [
            {
                name: '昨日外来访客',
                type: 'bar',
                data: [15, 20, 30, 25, 35, 40],
                itemStyle: {
                    color: 'purple', // 柱状图的颜色设置为紫色
                    borderRadius: [5, 5, 0, 0], // 设置柱状图的圆角
                    borderWidth: 1,
                },
            },
            {
                name: '今日外来访客',
                type: 'bar',
                data: [10, 15, 20, 35, 40, 45],
                itemStyle: {
                    color: 'green', // 柱状图的颜色设置为绿色
                    borderRadius: [5, 5, 0, 0], // 设置柱状图的圆角
                    borderWidth: 1,
                },
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
}

onMounted(() => {
    PersonnelTurnover()
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
});
</script>

<style scoped>
.PersonnelTurnover {
    position: fixed;
    right: 100px;
    top: 400px;
    width: 330px;
    height: 30px;
    background-image: url('../../assets/CombinedShape.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.visitor {
    width: 330px;
    height: 80px;
    position: fixed;
    right: 100px;
    top: 450px;
    background: rgba(12, 29, 95, 1);
    display: flex;

    .yesterday {
        width: 155px;
        height: 80px;
        background: rgba(12, 29, 95, 1);
        background: url("../../assets/PhotoDu.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        display: flex;


        .yesterday_icon {
            position: absolute;
            top: 25px;
            left: 15px;
        }

        .yesterday_number {
            position: absolute;
            top: 20px;
            left: 85px;
        }
    }

    .today {
        width: 155px;
        height: 80px;
        background: rgba(12, 29, 95, 1);
        position: absolute;
        top: 0%;
        right: 0%;
        background: url("../../assets/PhotoDu.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .today_icon {
            position: absolute;
            top: 25px;
            left: 15px;
        }

        .today_number {
            position: absolute;
            top: 20px;
            left: 85px;
        }
    }
}

.PersonnelTurnover-Bottom {
    width: 330px;
    height: 180px;
    background: rgba(12, 29, 95, 1);
    position: relative;
    right: -54px;
    top: 360px;
}
</style>